<template>
  <a href="">{{ location.address }}</a>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";

export default {
  name: "Device",
  props: {
    deviceNo: {
      type: [String, Number]
    }
  },
  computed: {
    ...mapState({
      devices: (state) => state.device.devices,
      positions: (state) => state.device.positions
    }),
    ...mapGetters({
      address: "device/address"
    }),
    device() {
      return this.devices?.[this.deviceNo] || {};
    },
    location() {
      return this.positions?.[this.deviceNo]?.location || {};
    }
  },
  mounted() {
    this.loadDevice(this.deviceNo);
  },
  methods: {
    ...mapActions({
      loadDevice: "device/load"
    })
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
